<script >
import {listAll} from "@/api/kong/group";
import {goLive} from "@/api/kong/kong";

export default {
  data() {
    return {
      checkAll: false,
      checkedCities: [],
      isIndeterminate: false,
      groupList:[],
      formData:{
        groupNames:[],
        params: {
          keyword:''
        },
        cmdSetGid:10,
        actype:1,
        hdms:2
      },
      actypes:[{name:'点赞',value:1},{name:'关注',value:2}]
    };
  },
  created() {
    this.groups();
  },
  methods: {
    handleCheckAllChange(val) {
      this.formData.groups = val ? this.groupList.map(item => item.groupName) : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.groupList.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.groupList.length;
    },
    likeAndFllows(value){

    },
    groups(keyword){
      this.loadinggroups = true
      const queryParams = {keyword:keyword};
      listAll(queryParams).then(response => {
        this.groupList = response.data;
      }).finally(() =>{
        this.loadinggroups = false
      });
    },
    onSubmit(){
      if(this.formData.groupNames.length==0){
        this.$modal.msgError("请选择要执行的组");
        return;
      }
      this.sumbmitLoading = true;
      goLive(this.formData).then(response => {
        this.$modal.msgSuccess("命令发送成功");
      }).finally(() =>{
        this.sumbmitLoading = false
      });
    }
  }
};
</script>

<template>
  <div class="setcmd">
    <el-form ref="form" model="formData" label-width="120px">
      <el-form-item label="选择执行组" required>
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <el-checkbox-group v-model="formData.groupNames" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="city in groupList" :label="city.groupName" :key="city.gid" :value="city.groupName">{{city.groupName}}({{city.totalNum}})</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
        <el-divider content-position="left">抖音互动参数设置</el-divider>
      <el-form-item label="互动模式" required>
<!--        <el-radio v-model="formData.hdms" :label="1">自动提取公屏互动</el-radio>-->
        <el-radio v-model="formData.hdms" :label="2">自定义文字互动(需要在下框输入)</el-radio>
      </el-form-item>
      <el-form-item label="自定义内容" required>
        <el-input
          type="textarea"
          placeholder="规则:如666|买买买|主播好漂亮"
          v-model="formData.params.keyword">
        </el-input>
        自定义互动(自定义需要在上框填入内容,多句用|分割(随机))
      </el-form-item>
<!--      <el-form-item label="互动间隔" required>-->
<!--        <el-row :gutter="9">-->
<!--          <el-col :span="2">-->
<!--            <el-input-->
<!--              v-model="input1">-->
<!--            </el-input>-->
<!--          </el-col>-->
<!--          <el-col :span="0.5">到</el-col>-->
<!--          <el-col :span="2">-->
<!--            <el-input-->
<!--              v-model="input1">-->
<!--            </el-input>-->
<!--          </el-col>-->
<!--          <el-col :span="4">-->
<!--            秒,持续点赞秒数范围(范围内随机)-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--      </el-form-item>-->

      <el-form-item>
        <el-button type="primary" @click="onSubmit">执行任务</el-button>
        <el-button type="danger" @click="onSubmit">停止任务</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped lang="scss">
.setcmd{
  margin: 10px;
}
.el-col {
  text-align: center;
}
</style>
